<template>
	<view class="page">
		<headerVue title="我的理财"></headerVue>
		<view class="item item1 margin30 flex-column flex-between" v-if="info[0].showStatus==1">
			<view class="flex-between align-center">
				<image src="../../static/financeManagement/4.png" style="width: 153rpx; height: 50rpx;"></image>
				<text style="line-height: 1; font-size: 42rpx; color: #45F882;">{{info[0].totalAmount}}</text>
			</view>
			<u-line-progress inactive-color="#3B3B3E" :show-percent="false" active-color="#45F882" :percent="percent1"></u-line-progress>
			<view class="flex-between align-center">
				<text style="color: rgba(255, 255, 255, 0.6); line-height: 1;">今日收益</text>
				<text style="line-height: 1; font-size: 32rpx; color: #45F882;">{{info[0].todayAmount}}</text>
			</view>
		</view>
		
		<view class="item item2 margin30 flex-between" v-if="info[1].showStatus==1">
			<image src="../../static/financeManagement/5.png" style="width: 153rpx; height: 50rpx;"></image>
			<u-circle-progress inactive-color="#3B3B3E" border-width="30" active-color="#FCFF24" :percent="percent2" bg-color="transparent"></u-circle-progress>
			<view class="flex-column flex-between">
				<text style="color: #FCFF24; line-height: 1;">总收益: {{info[1].totalAmount}}</text>
				<text style="color: #FCFF24; line-height: 1;">今日收益: {{info[1].todayAmount}}</text>
			</view>
		</view>
		
		<view class="item item3 margin30 flex-between" v-if="info[2].showStatus==1">
			<image src="../../static/financeManagement/6.png" style="width: 153rpx; height: 50rpx;"></image>
			<u-circle-progress inactive-color="#3B3B3E" border-width="30" active-color="#80F5FF" :percent="percent3" bg-color="transparent"></u-circle-progress>
			<view class="flex-column flex-between">
				<text style="color: ##80F5FF; line-height: 1;">总收益: {{info[2].totalAmount}}</text>
				<text style="color: ##80F5FF; line-height: 1;">今日收益: {{info[2].todayAmount}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				info: {},
				percent1: 0,
				percent2: 0, 
				percent3: 0,
				timer1: null,
				timer2: null,
				timer3: null
			}
		},
		onLoad() {
			this.timer1 = null
			this.timer2 = null
			this.timer3 = null
			clearInterval(this.timer1)
			clearInterval(this.timer2)
			clearInterval(this.timer3)
			this.setPercent1()
			this.setPercent2()
			this.setPercent3()
		},
		async onShow(){
			this.getInfo()
		},
		onUnload() {
			clearInterval(this.timer1)
			clearInterval(this.timer2)
			clearInterval(this.timer3)
			this.timer1 = null
			this.timer2 = null
			this.timer3 = null
		},
		methods: {
			async getInfo(){
				const res = await this.$request("/front/financial/info")
				if(res.code===0) {
					this.info = res.data
				}
			},
			setPercent1(){
				this.timer1 = setInterval(()=>{
					this.percent1+=5
					if(this.percent1===100) this.percent1=0
				},500)
			},
			setPercent2(){
				this.timer2 = setInterval(()=>{
					this.percent2+=6.25
					if(this.percent2===100) this.percent2=0
				},500)
			},
			setPercent3(){
				this.timer3 = setInterval(()=>{
					this.percent3+=10
					if(this.percent3===100) this.percent3=0
				},500)
			}
		}
	}
</script>

<style lang="less" scoped>
	.item {
		width: 670rpx;
		height: 300rpx;
		padding: 50rpx;
	}
	.item1 {
		background: url("../../static/K7.png") no-repeat;
		background-size: 100% 100%;
	}
	.item2 {
		background: url("../../static/K8.png") no-repeat;
		background-size: 100% 100%;
	}
	.item3 {
		background: url("../../static/K9.png") no-repeat;
		background-size: 100% 100%;
	}
</style>